<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">Toolbar</h1>
		<div class="entry">
			<p>Toolbar is a grouping component for buttons and other content.</p>

            <h:form>
                <p:toolbar>
                    <p:toolbarGroup align="left">
                        <p:commandButton type="button" value="New" image="ui-icon-document" />

                        <p:commandButton type="button" value="Open" image="ui-icon-folder-open"/>

                        <p:separator />

                        <p:commandButton type="button" title="Save" image="ui-icon-disk"/>
                        <p:commandButton type="button" title="Delete" image="ui-icon-trash"/>
                        <p:commandButton type="button" title="Print" image="ui-icon-print"/>
                    </p:toolbarGroup>

                    <p:toolbarGroup align="right">
                        <p:menuButton value="Options" zindex="10">
                            <p:menuitem value="Save" actionListener="#{buttonBean.save}" update="messages" icon="ui-icon ui-icon-disk"/>
                            <p:menuitem value="Update" actionListener="#{buttonBean.update}" update="messages" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Delete" actionListener="#{buttonBean.delete}" ajax="false" icon="ui-icon ui-icon-close"/>
                            <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon ui-icon-extlink"/>
                        </p:menuButton>
                    </p:toolbarGroup>

                </p:toolbar>
            </h:form>
	
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="toolbar.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;
  &lt;p:toolbar&gt;
    &lt;p:toolbarGroup align="left"&gt;
        &lt;p:commandButton type="button" value="New" image="ui-icon-document" /&gt;

        &lt;p:commandButton type="button" value="Open" image="ui-icon-folder-open"/&gt;

        &lt;p:separator /&gt;

        &lt;p:commandButton type="button" title="Save" image="ui-icon-disk"/&gt;
        &lt;p:commandButton type="button" title="Delete" image="ui-icon-trash"/&gt;
        &lt;p:commandButton type="button" title="Print" image="ui-icon-print"/&gt;
    &lt;/p:toolbarGroup&gt;

    &lt;p:toolbarGroup align="right"&gt;
        &lt;p:menuButton value="Navigate"&gt;
            &lt;p:menuitem value="Home" url="http://www.primefaces.org" /&gt;
            &lt;p:menuitem value="ShowCase"
                        url="http://www.primefaces.org/showcase" /&gt;
            &lt;p:menuitem value="TouchFaces"
                        url="http://www.primefaces.org/showcase/touch" /&gt;
        &lt;/p:menuButton&gt;
    &lt;/p:toolbarGroup&gt;

  &lt;/p:toolbar&gt;
&lt;/h:form&gt;
                    </pre>
				</p:tab>
			</p:tabView>

		</div>

	</ui:define>
</ui:composition>
